<template>
	<div class="overview-container">
		<h2 class="page-title">系统概览</h2>
		<div class="overview">
			<div class="box">
				<div class="inner">
					<h3>设备总数</h3>
					<p><count-to :startVal="0"
								:endVal="overview.number"
								:duration="2000"></count-to></p>
				</div>
			</div>
			<div class="box">
				<div class="inner">
					<h3>设备总金额</h3>
					<p><count-to :startVal="0"
								:endVal="overview.amount"
								:duration="2000"></count-to></p>
				</div>
			</div>
		</div>
		<div class="chart-list clear-fix">
			<chart-box ref="status"/>
			<chart-box ref="category"/>
		</div>
	</div>
</template>

<script>
import CountTo from 'vue-count-to'
import ChartBox from '@/components/ChartBox.vue'
export default {
	components:{
		CountTo,
		ChartBox
	},
	data(){
		return {
			overview:{
				amount: 0,
				number: 0
			}
		}
	},
	created(){
		this.getOverview()
		
	},
	methods:{
		getOverview(){
			this.axios.get('/overview').then(data => {
				if(!data.code){
					this.overview = data.data
				}
			})
		},
		getChartData(){
			this.axios.get("/status-overview").then(data => {
				if(!data.code) {
					console.log(data)
					this.drawStatus(data.data)

				}
			})
			this.axios.get('/category-overview').then(data => {
				if(!data.code){
					this.drawCategory(data.data)
				}
			})
		},
		drawStatus(data){
			console.log(data)
			const config = {
				color: ['#c23431','#2f4554','#61a0a8','#d48265'],
				title: {
					text: '设备状态汇总',
					left: 'center',
					top: 20,
					textStyle: {
						fontWeight: 'bold',
						color: '#666'
					}
				},
				series: [{
					type: 'pie',
					radius: '40%',
					data: data.label.map((name,index) => {
						return {
							value: data.value[index],
							name
						}
					}),
					label: {
						formatter: '{b}:{c}'
					}
				}]
			}
			this.$refs.status.draw(config)
		},
		drawCategory(data){
			const config = {
				color: ['#00dd00'],
				title: {

					text: '设备分类汇总',
					left: 'center',
					top: 20,
					textStyle: {
						fontWeight: 'bold',
						color: '#666'
					}
				},
				xAxis: {
						type: 'category',
						data: data.label,
						axisLabel: { interval: 0,rotate: 30}
				},
				yAxis: {
						type: 'value'
				},
				series: [{
						data: data.value,
						type: 'bar'
				}]
			}
			this.$refs.category.draw(config)
		},
		resize(){
			this.$refs.status.resize()
			this.$refs.category.resize()
		}
	},
	mounted(){
		this.getChartData()
		window.addEventListener('resize',this.resize)
	},
	beforeDestroy(){
		window.removeEventListener('resize',this.resize)
	}
}
</script>

<style lang="sass">
.overview-container
	padding: 0 30px
	.box
		border-radius: 8px
		height: 100px
		padding: 0 30px 0 90px
		background-repeat: no-repeat
		background-position: 30px center
		background-size: 30px
		display: inline-block
		&:first-child
			background-color: rgba(171,125,246,.2)
			background-image: url(~@/assets/img/icon1.png)
			margin-right: 30px
			color: #ab7df6
		&:last-child
			background-color: rgba(129,201,38,.2)
			background-image: url(~@/assets/img/icon2.png)
			color: #81c926
		.inner
			h3
				line-height: 1.2em
				font-size: 16px
				font-weight: normal
				white-space: nowrap
				padding-top: 18px
			p
				font-size: 36px
				font-weight: 700
				white-space: nowrap
	.chart-list
		margin-top: 36px
		.chart-box
			height: 420px
			float: left

			&:first-child
				width: 35%
				margin-right: 3%
			&:last-child
				width: 55%
</style>
